<layout name="../../../Resource/master"/>
<ul class="breadcrumb no-border no-radius b-b b-light pull-in">
    <li><a href=""><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#">商品管理</a></li>
    <li><a href="#">商品添加</a></li>
</ul>
<div class="m-b-md">
    <h3 class="m-b-none">商品添加</h3>
</div>
<section class="panel panel-default">
    <header class="panel-heading font-bold">商品添加</header>
    <div class="panel-body">
        <form class="form-horizontal" method="post" action="">
            <div class="form-group">
                <label class="col-sm-2 control-label">所属分类</label>
                <div class="col-sm-10">
                    <select name="cid" class="form-control m-b">
                        <option value="0">请选择</option>
                        <volist name="cateData" id="vo">
                            <option value="{$vo['cid']}" tid="{$vo['tid']}" <if condition="$oldData['cid']==$vo['cid']">selected</if> >{$vo._cname}</option>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">所属品牌</label>
                <div class="col-sm-10">
                    <select name="bid" class="form-control m-b">
                        <option>请选择</option>
                        <volist name="brandData" id="vo">
                            <option value="{$vo['bid']}"  <if condition="$oldData['bid']==$vo['bid']">selected</if> >{$vo['bname']}</option>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>

            <div class="form-group">
                <label class="col-sm-2 control-label">商品名称</label>
                <div class="col-sm-10">
                    <input type="text" value="{$oldData['gname']}" name="gname" class="form-control rounded">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品货号</label>
                <div class="col-sm-10">
                    <input type="text" value="{$oldData['gnumbers']}"  name="gnumbers" class="form-control">
                    <span class="help-block m-b-none">请输入商品货号。。。</span>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="input-id-1">单位</label>
                <div class="col-sm-10">
                    <input type="text" name="unit" class="form-control" id="input-id-1" value="{$oldData['unit']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">市场价</label>
                <div class="col-sm-10">
                    <input type="number" value="{$oldData['marketprice']}" name="marketprice" class="form-control">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商城价</label>
                <div class="col-sm-10">
                    <input type="text" value="{$oldData['shopprice']}"  class="form-control" name="shopprice" placeholder="">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">点击次数</label>
                <div class="col-sm-10">
                    <input type="text"  value="{$oldData['click']}" class="form-control" name="click" placeholder="">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">库存</label>
                <div class="col-sm-10">
                    <input type="text" value="{$oldData['stocks']}" class="form-control" name="stocks" placeholder="">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品属性</label>
                <div class="col-sm-10">
                    <table class="table table-hover" id="attr">

                        <volist name="attrData" id="vo">
                            <tr>
                                <td>{$vo.name}</td>
                                <td>
                                <select  class="form-control m-b" name="attr[{$vo['taid']}]" id="">
                                    <option value="0">请选择</option>
                                    <volist name="vo['value']" id="n">
                                        <option value="{$n}" <if condition="in_array($n,$hasData)">selected</if> >{$n}</option>
                                    </volist>
                                </select>
                                </td>
                            </tr>
                        </volist>
                    </table>
                </div>
            </div>
            <script src="__ROOT__/node_modules/hdjs/js/jquery.min.js"></script>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品规格</label>
                <div class="col-sm-10">
                    <table class="table table-hover" id="spec">
                       <volist name="specData" id="vo">
                           <tr>
                               <td>{$vo['name']}</td>
                               <td>
                                    <select  class="form-control m-b" name="spec[{$vo['taid']}][value][]">
                                            <option>请选择</option>
                                        <volist name="vo['value']" id="n">
                                            <option value="{$n}"  <if condition="$vo['gtvalue']==$n">selected</if> >{$n}</option>
                                        </volist>
                                    </select>
                               </td>
                               <td>附加价格</td>
                               <td>
                                   <input type="text" name="spec[{$vo['taid']}][added][]" value="{$vo['added']}" class="form-control">
                               </td>
                               <td class="lastTd">
                                    <button type="button" class="label bg-danger del-spec">删除</button>
                               </td>
                           </tr>
                           <script>
                               $(function(){
                                   $("#spec").find("tr:contains('{$vo['name']}')").eq(0).find("td:last").html('<button type="button" class="label bg-info add-spec">添加</button>')
                               })
                           </script>
                       </volist>
                    </table>
                </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <!--引入uploadify相关js、css-->
            <script src="__ROOT__/node_modules/hdjs/js/jquery.min.js"></script>
            <script src="__PUBLIC__/Admin/uploadify/jquery.uploadify.min.js"></script>
            <link rel="stylesheet" href="__PUBLIC__/Admin/uploadify/uploadify.css">
            <div class="form-group">
                <label class="col-sm-2 control-label">列表图</label>
                <div class="col-sm-2">
                    <input type="file" name="file_upload" id="list-pic" />
                    <script>
                        $(function() {
                            $("#list-pic").uploadify({
                                "height"            : 30,
                                "swf"               : '__PUBLIC__/Admin/uploadify/uploadify.swf',
                                "uploader"          : "{:U('Admin/Goods/ajaxUpload')}",
                                "width"             : 120,
                                'buttonText'        : '请选择文件',   //提示文字
                                'successTimeout'    : 20,            //上传延时时间
                                'fileSizeLimit'     : '2000KB',      //上传文件最大限制
                                'uploadLimit'       : 1,            //最多上传
                                'removeTimeout'     : 0.2,           //显示时间
                                'fileTypeExts' : '*.gif; *.jpg; *.png',
                                'onUploadSuccess' : function(file, data, response) {
//                                    var li = '<li path="'+data+'" style="float: right"><img src="__ROOT__/'+data+'" style="width: 80px"/><a href="javascript:;" style="color:red" class="del-img">X</a><input name="pic" hidden value="'+data+'"/></li>';
                                    var li = '<li path="'+data+'" style="float: right;list-style: none;"><img src="__ROOT__/'+data+'" style="width: 80px"/><a href="javascript:;" style="color:red;font-size:25px ;" class="del-img">X</a><input name="pic" hidden value="'+data+'"/></li>';
//                                    将li追加到id为listPic中
                                    $('#listPic').append(li);

                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-sm-8" id="listPic">
                    <li path="{$oldData['pic']}" style="float: right;list-style: none;">
                        <img src="__ROOT__/{$oldData['pic']}" style="width: 80px"/>
                        <a href="javascript:;" style="color:red;font-size:25px;" class="del-img">X</a>
                        <input name="pic" hidden value="{$oldData['pic']}"/>
                    </li>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品图册</label>
                <div class="col-sm-2">
                    <input type="file" name="file_upload" id="detail-pic" />
                    <script>
                        $(function() {
                            $("#detail-pic").uploadify({
                                "height"            : 30,
                                "swf"               : '__PUBLIC__/Admin/uploadify/uploadify.swf',
                                "uploader"          : "{:U('Admin/Goods/ajaxUpload')}",
                                "width"             : 120,
                                'buttonText'        : '请选择文件',   //提示文字
                                'successTimeout'    : 20,            //上传延时时间
                                'fileSizeLimit'     : '2000KB',      //上传文件最大限制
                                'uploadLimit'       : 10,            //最多上传
                                'removeTimeout'     : 0.2,           //显示时间
                                'fileTypeExts' : '*.gif; *.jpg; *.png',
                                'onUploadSuccess' : function(file, data, response) {
//                                    var li = '<li path="'+data+'" style="float: right"><img src="__ROOT__/'+data+'" style="width: 80px"/><a href="javascript:;" style="color:red" class="del-img">X</a><input name="pic" hidden value="'+data+'"/></li>';
                                    var li = '<li path="'+data+'" style="float: right;list-style: none;"><img src="__ROOT__/'+data+'" style="width: 80px"/><a href="javascript:;" style="color:red;font-size:25px ; " class="del-img">X</a><input name="detailPic[]"hidden value="'+data+'"/></li>';
//                                    将li追加到id为listPic中
                                    $('#detailPic').append(li);

                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-sm-8" id="detailPic">
                    <volist name="oldData['big']" id="vo">
                        <li path="{$vo}" style="float: right;list-style: none;">
                            <img src="__ROOT__/{$vo}" style="width: 80px"/>
                            <a href="javascript:;" style="color:red;font-size:25px;" class="del-img">X</a>
                            <input name="detailPic[]" hidden value="{$vo}"/>
                        </li>
                    </volist>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <!--引入百度编辑js文件-->
            <script src="__PUBLIC__/Admin/ueditor1_4_3/ueditor.config.js"></script>
            <script src="__PUBLIC__/Admin/ueditor1_4_3/ueditor.all.js"></script>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品详情</label>
                <div class="col-sm-10">
                    <textarea name="intro" id="intro" style="width:900px">{$oldData['intro']}</textarea>
                    <script>
                        UE.getEditor('intro');
                    </script>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">售后服务</label>
                <div class="col-sm-10">
                    <textarea name="service" id="service" style="width:900px">{$oldData['service']}</textarea>
                    <script>
                        UE.getEditor('service');
                    </script>
                </div>
            </div>
            <input type="text" hidden name="tid" value="{$oldData['tid']}" >
            <button class="btn btn-twitter btn-block m-b-sm">提交</button>
        </form>
    </div>
</section>
<script>
    function controller ($scope,$,_){
//        异步获取规格和属性
        $("select[name=cid]").change(function(){
//            检测是否能change函数生效  alert('I');
//            1.获取当前选中的类型id :selected 选中的
            var tid = $(':selected').attr('tid');
//            2.顶级分类不能添加商品
            if(tid==0){
                alert('顶级分类不能添加数据');
                $(this).val(0); return false;
            }
////            3.将tid的是放到隐藏域中
            $("input[name=tid]").val(tid);
//            4.根据tid异步发送的获取数据类型属性数据
            $.post("{:U('Admin/Goods/ajaxGetAttr')}",{tid:tid},function(res){
                var spec = '';//规格
                var attr = '';//属性
                $.each(res,function(k,v){
                    if(v.type == 0) { //说明是属性
                        attr+='<tr><td>'+v.name+'</td><td>';
                        attr+='<select  class="form-control m-b" name="attr['+v.taid+']">';
                        attr+=' <option value="0">请选择</option>';
                        $.each(v.value,function(m,n){
                            attr+=' <option value="'+n+'">'+n+'</option>';
                        })
                        attr+='</select> </td></tr>';
                    }else{
                        spec += '<tr><td>'+v.name+'</td><td>';
                        spec += ' <select  class="form-control m-b" name="spec['+v.taid+'][value][]">';
                        spec += ' <option>请选择</option>';
                        $.each(v.value,function(m,n){
                            spec += ' <option value="'+n+'">'+n+'</option>';
                        });
                        spec += ' </select></td><td>附加价格</td>';
                        spec += '<td><input type="text" name="spec['+v.taid+'][added][]"  class="form-control"></td>';
                        spec += ' <td class="lastTd"><button type="button" class="label bg-info add-spec">添加</button></td></tr>';
                    }
                })
//                在循环完成之后，将数据写入到对应的页面标签中
                $('#attr').html(attr);
                $('#spec').html(spec);

            },'json');
        })

//        点击规格添加按钮，添加一项
        $('#spec').delegate('.add-spec','click',function(){
//                将添加按钮克隆一份
            var tr = $(this).parents('tr').clone();
            $(this).parents('tr').after(tr);
//                alert(1);
//                将添加按钮改为删除按钮
            tr.last('td').find('.add-spec').remove();
//                alert(1);
            var del = '<button type="button" class="label bg-danger del-spec">删除</button>'
//                将del追加到lastTd中
            tr.find('.lastTd').append(del);
        })
//        点击规格删除，就删除一项
        $('#spec').delegate('.del-spec','click',function(){
            $(this).parents('tr').remove();
        })

//        图册点击删除
        $('#detailPic,#listPic').delegate('.del-img','click',function(){
//                获得li上的图片路径
            var path = $(this).parents('li').attr('path');
//                处理this的指向
            var $_this= $(this);
//                删除页面图片
            $.post("{:U('Admin/Goods/ajaxDelImg')}",{path:path},function(res){
//                    将页面的图片删除
                $_this.parents('li').remove();
            })
        })

    }
</script>